<template>
  <div class="set-progress">
    <RangeSlider
      class="slider"
      :min="0"
      :max="100"
      :step="1"
      v-model="rangeVal"
      @change="setProgress"
      :disabled="!bookAvailable"
    ></RangeSlider>
    <span v-if="bookAvailable">{{ rangeVal }}%</span>
    <span v-else>加载中...</span>
  </div>
</template>

<script>
  import RangeSlider from 'vue-range-slider'
  // you probably need to import built-in style
  import 'vue-range-slider/dist/vue-range-slider.css';
  import EventEmitter from '@/utils';

  export default {
    data() {
      return {
        rangeVal: 0,
      }
    },
    props: {
      bookAvailable: {
        type: Boolean,
        default: false,
      },
    },
    components: {
      RangeSlider,
    },
    methods: {
      setProgress() { // 失焦时触发
        EventEmitter.emit('setProgress', this.rangeVal);
      }
    },
  }
</script>

<style lang="scss" scoped>
@import '@/assets/style/global.scss';

.set-progress {
  @include flexLayout;
  height: 100%;
  padding: 0 px2rem(30);
  .slider {
    flex: 1;
  }
}
</style>